<template>
  <div class="header">

    <el-image :src="logo" >
      <div slot="placeholder" class="image-slot">
        加载中<span class="dot">...</span>
      </div>
    </el-image>

    <div class="title">

      {{'欢迎' + title }}
      <div class="back" title="点击退出系统" @click="back">
        <el-icon><Back /></el-icon>
        退出系统
      </div>
  </div>

  </div>
  <div class="home-el-box">
    <component :is="nav"></component>
  </div>
  
  <!-- 视图容器 -->
  <div class="home-el-box">
    <router-view></router-view>
  </div>
</template>

<script setup>
import { ref, onUnmounted } from "vue";
import admin from "@/components/nav-admin";
import teacher from "@/components/nav-teacher";
import student from "@/components/nav-student";
import { Back } from "@element-plus/icons-vue";
import logout from "@/modules/logout";

import { useRouter } from "vue-router";

let nav = localStorage.type == "admin" ? admin : localStorage.type == "tb_teacher" ? teacher : student;
let router = useRouter();
let title = localStorage.name;
let name = localStorage.user;
let logo = '/logo.png';
if (name == undefined) {
  router.replace("/logn");
}
// document.body.style.paddingLeft = "200px";

onUnmounted(() => {
  document.body.style.paddingLeft = "0px";
  document.body.classList.add("logn");
});
function back() {
  logout({}).then(res=>{
    console.log(res);
  })
  localStorage.clear();
  router.replace("logn");
}
</script>
<style scoped>
.header{
  position: fixed;
  width: 100%;
  z-index: 2;
}
.el-image{
  width: 250px;
  position: absolute;
  top: 12px;
  left: 1%;
  z-index: 2;
}

.el-row{
  top: 75px;
}
.row_left{
  margin-top: 80px;
}
.el-image__inner{
  height: 50px !important;
}

.home-el-box{
  margin-left: 220px;
  margin-top: 100px;
}
.title {
  width: 100%;
  height: 75px;
  line-height: 75px;
  text-align: center;
  background-color: #545c64;
  color: white;
}
.back {
  float: right;
  font-size: 14px;
  margin-right: 20px;
  color: white;
  cursor: pointer;
}
</style>
